<template>
  <div class="order-consume">
    <div class="container">
      <div class="detail">
        <div class="title">支付方式</div>
        <div class="part">
          <div :class="[type === 0 ? 'active' : '']" @click="selectType(0)">
            全部
          </div>
          <div :class="[type === 1 ? 'active' : '']" @click="selectType(1)">
            微信
          </div>
          <div :class="[type === 2 ? 'active' : '']" @click="selectType(2)">
            电子卡
          </div>
        </div>
      </div>
      <div class="content">
        <div v-if="orderList.length === 0" class="no-img">
          <div></div>
          <span>无记录</span>
        </div>
        <template>
          <div class="ele" v-for="(ele, index) in orderList" :key="index">
            <div class="title">
              <span class="text">{{ "订单号" }}</span>
              <span class="amount">{{ ele.orderNo }}</span>
            </div>
            <div class="item">
              <span class="text">{{ "实付金额" }}</span>
              <span class="amount">{{ ele.amt + " 元" }}</span>
            </div>
            <div class="item">
              <span class="text">{{ "应付金额" }}</span>
              <span class="amount">{{ ele.receivableAmt + " 元" }}</span>
            </div>
            <div class="item">
              <span class="text">{{ "优惠金额" }}</span>
              <span class="amount">{{ ele.discountAmt + " 元" }}</span>
            </div>
            <div class="item">
              <span class="text">{{ "枪标价格" }}</span>
              <span class="amount">{{
                ele.oilPirce + " " + unitTranslation[ele.oilType] + "/元"
              }}</span>
            </div>
            <div class="item">
              <span class="text">{{ "加油总量" }}</span>
              <span class="amount">{{
                ele.orderLiters + " " + unitTranslation[ele.oilType]
              }}</span>
            </div>
            <div class="item">
              <span class="text">{{ "支付时间" }}</span>
              <span class="amount">{{ ele.payDate }}</span>
            </div>
            <div class="item">
              <span class="text">{{ "支付方式" }}</span>
              <span class="amount">{{ ele.payType }}</span>
            </div>
          </div>
          <van-pagination
            v-model="queryForm.pageNum"
            :total-items="total"
            :items-per-page="queryForm.pageSize"
            mode="simple"
            @change="getList"
            v-if="total > queryForm.pageSize"
          >
            <template #prev-text>
              <van-icon name="arrow-left" />
            </template>
            <template #next-text>
              <van-icon name="arrow" />
            </template>
            <template #page="{ text }">{{ text }}</template>
          </van-pagination>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
// import { mapGetters } from "vuex";
import { Pagination, Icon } from "vant";
import Vue from "vue";
Vue.use(Icon);
Vue.use(Pagination);

export default {
  head() {
    return {
      title: "消费记录"
    };
  },
  data() {
    return {
      type: 0, //0全部 1充值 2支出
      unitTranslation: [, "L", "L", "L", "Kg", "L"],
      orderList: [],
      total: 0,
      queryForm: {
        mobilePhone: this.phone,
        pageNum: 1,
        enterpriseId: this.enterpriseId,
        pageSize: 10,
        payType: "wx"
      }
    };
  },
  created() {
    this.init();
  },
  methods: {
    async init() {
      this.queryForm.mobilePhone = this.phone;
      this.queryForm.enterpriseId = this.enterpriseId;

      this.getList();
    },
    getList() {
      if (!this.phone || !this.enterpriseId) {
        return;
      }
      this.$axios
        .post("/getUserOrderListByUnionId", this.queryForm)
        .then(res => {
          this.orderList = res.data.data.list;
          this.total = res.data.data.total;
          this.toTop();
        })
        .catch(err => {
          alert(err);
        });
    },
    toTop() {
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      // 实现滚动效果
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 10);
    },
    selectType(type) {
      this.type = type;
      this.queryForm.payType = [, "wx", "dzk"][type];
      this.queryForm.pageNum = 1;
      this.queryForm = { ...this.queryForm };
      this.getList();
    }
  }
};
</script>

<style scoped>
.order-consume {
  width: 100%;
  height: 16.24rem;
  background: #ffffff;
}
.order-consume .container {
  width: 6.9rem;
  margin: 0 auto;
}
.order-consume .container .overview {
  width: 6.9rem;
  height: 2.8rem;
  background: url("../../../static/point/4_b01_bj@2x.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.order-consume .container .overview .title {
  height: 0.4rem;
  font-size: 0.28rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 0.4rem;
  position: absolute;
  left: 0.6rem;
  top: 0.3rem;
}
.order-consume .container .overview > .card {
  position: absolute;
  left: 0.3rem;
  top: 0.9rem;
  width: 6.3rem;
  height: 1.8rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-around;
}
.order-consume .container .overview > .card div {
  font-size: 0.28rem;
  color: #ffffff;
  font-weight: 500;
}
.order-consume .container .overview > .card div span {
  font-weight: 600;
  font-size: 0.4rem;
}

.order-consume .container .overview .pay {
  width: 1.4rem;
  height: 0.5rem;
  border-radius: 0.39rem;
  border: 0.02rem solid #ffffff;
  position: absolute;
  top: 0.25rem;
  right: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.order-consume .container .overview .pay .icon {
  width: 0.3rem;
  height: 0.3rem;
  background: #ffffff;
  display: inline-block;
  background: url("../../../static/point/jinbi.png") no-repeat;
  background-size: cover;
}

.order-consume .container .overview .pay .text {
  display: inline-block;
  height: 0.6rem;
  font-size: 0.28rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 0.6rem;
  margin-left: 0.2rem;
}

.order-consume .container .detail {
  width: 100%;
  height: 1.17rem;
  display: flex;
  justify-content: space-between;
  border-bottom: 0.01rem solid #e0e0e0;
}

.order-consume .container .detail .title {
  height: 1.17rem;
  font-size: 0.32rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #000000;
  line-height: 1.17rem;
}
.order-consume .container .detail .part {
  display: flex;
  width: 3.2rem;
  height: 1.13rem;
  justify-content: space-between;
  align-items: center;
}

.order-consume .container .detail .part div {
  height: 1.13rem;
  font-size: 0.32rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #aaaaaa;
  line-height: 1.13rem;
}
.order-consume .container .detail .part .active {
  height: 1.13rem;
  font-size: 0.32rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #111111;
  border-bottom: 0.06rem solid #db9d28;
}
.order-consume .container .content {
  width: 100%;
}
.order-consume .container .content .no-img {
  width: 100%;
  height: 60vh;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.order-consume .container .content .no-img div {
  width: 2.29rem;
  height: 1.87rem;
  background: url("../../../static/common/wu@2x.png") no-repeat 0 0;
  background-size: 100% 100%;
}
.order-consume .container .content .no-img span {
  width: 2.29rem;
  height: 0.4rem;
  font-size: 0.28rem;
  font-weight: 500;
  color: #aaaaaa;
  line-height: 0.4rem;
  text-align: center;
}

.order-consume .container .content .ele {
  border-bottom: 0.01rem solid #e0e0e0;
  padding: 0.3rem 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.order-consume .container .content .ele .title {
  width: 100%;
  height: 0.45rem;
  font-size: 0.32rem;
  font-family: PingFangSC-Regular, PingFang SC;
  color: #111111;
  line-height: 0.45rem;
  display: flex;
  justify-content: space-between;
}

.order-consume .container .content .ele .title .text {
  display: inline-block;
  height: 0.45rem;
  font-weight: 500;
  color: #111111;
}

.order-consume .container .content .ele .title .amount {
  display: inline-block;
  height: 0.45rem;
  font-weight: 500;
  color: #db9d28;
}

.order-consume .container .content .ele .item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.15rem;
  height: 0.4rem;
  font-size: 0.28rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #aaaaaa;
  line-height: 0.4rem;
}

.order-consume .container .content .ele .item .text {
  display: inline-block;
  height: 0.4rem;
  font-size: 0.28rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #aaaaaa;
  line-height: 0.4rem;
}

.order-consume .container .content .ele .item .amount {
  display: inline-block;
  height: 0.4rem;
  font-size: 0.28rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  line-height: 0.4rem;
}
</style>
